<!-- 首页工作台 柱状图部分 -->
<template>
  <div class="row-three">
    <!-- 左侧标题 注册用户分析 -->
    <div class="header">注册用户分析</div>

    <!-- 右侧柱状图部分 -->
    <div class="chart">
      <BarChart :data="barChartData" />
    </div>
  </div>
</template>

<script setup>
import BarChart from "./BarChart.vue";
import { ref, onMounted } from "vue";
const barChartData = ref([
  //1-30号的数据
  { name: "1", value: 120 },
  { name: "2", value: 200 },
  { name: "3", value: 150 },
  { name: "4", value: 80 },
  { name: "5", value: 70 },
  { name: "6", value: 110 },
  { name: "7", value: 130 },
  { name: "8", value: 120 },
  { name: "9", value: 200 },
  { name: "10", value: 150 },
  { name: "11", value: 80 },
  { name: "12", value: 70 },
  { name: "13", value: 110 },
  { name: "14", value: 130 },
  { name: "15", value: 120 },
  { name: "16", value: 200 },
  { name: "17", value: 150 },
  { name: "18", value: 80 },
  { name: "19", value: 70 },
  { name: "20", value: 110 },
  { name: "21", value: 130 },
  { name: "22", value: 120 },
  { name: "23", value: 200 },
  { name: "24", value: 150 },
  { name: "25", value: 80 },
  { name: "26", value: 70 },
  { name: "27", value: 110 },
  { name: "28", value: 130 },
  { name: "29", value: 120 },
  { name: "30", value: 200 },
]);

//页面加载时 获取后端接口数据
import { getRowThreeDataApi } from "@/api/dashboard/dashboard";
onMounted(() => {
  getRowThreeDataApi()
    .then((res) => {
      console.log("RowThree组件获取数据:", res);
      //赋值
      barChartData.value = res.data;
    })
    .catch((err) => {
      console.error("获取数据失败:", err);
    });
});
</script>

<style scoped lang="scss">
.row-three {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 240px;
  box-sizing: border-box;
  padding: 10px 20px;
  gap: 10px;

  /**
  * 左侧标题部分
  */
  .header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    width: 40px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-right: 1px solid #333;
  }

  /**右侧柱状图部分 */
  .chart {
    flex: 1;
    background-color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}
</style>
